<template>
  <div class="z_menu" :class="{ collapsed: collapse }">
    <div class="z_menu_inner scrollbar">
      <a-menu
        show-collapse-button
        @collapse="onCollapse"
        @menu-item-click="handleMenuItemClick"
        v-model:selected-keys="selectedKeys"
        v-model:open-keys="openKeys"
      >
      <z-menuitem :list="menuList"></z-menuitem>
      </a-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ZMenuitem from "@/components/admin/menu/menuitem/index.vue";
import { reactive, ref, watch } from "vue";
import { collapse, onCollapse } from "./index";
import { menuList } from "./index";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();

const openKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);

const initRoute = () => {
  if (route.matched.length === 3) {
    openKeys.value = [route.matched[1].name as string];
  }
  selectedKeys.value = [route.name as string];
};
initRoute();

watch(
  () => route.name,
  () => {
    initRoute();
  },
  {
    immediate: true,
  }
);

const handleMenuItemClick = (key: string) => {
  console.log("handleMenuItemClick", key);
  router.push({ name: key });
};
</script>
<style lang="less">
.z_menu {
  height: calc(100vh - 90px);
  position: relative;
  &.collapsed {
    .arco-menu-collapse-button {
      left: 48px !important;
    }
  }
  &:hover {
    .arco-menu-collapse-button {
      opacity: 1 !important;
    }
  }
  .z_menu_inner {
    height: 100%; //防止整体出现滚动条
    overflow-y: auto;
    overflow-x: hidden;
    .arco-menu {
      position: inherit;
      .arco-menu-collapse-button {
        top: 50%;
        transform: translate(-50%, -50%);
        left: 240px;
        opacity: 0;
        transition: all 0.3s;
      }
    }
  }
}
</style>
